<template>
    <div>
      <h1>锅炉监控系统</h1>
      
      <div>
        <label>温度: {{ temperature }}°C</label>
        <br />
        <label>湿度: {{ humidity }}%</label>
      </div>
      
      <button @click="increaseTemperature">增加温度</button>
      <button @click="decreaseTemperature">减少温度</button>
      <button @click="increaseHumidity">增加湿度</button>
      <button @click="decreaseHumidity">减少湿度</button>
      
      <div v-if="alert" style="color: red; margin-top: 20px;">
        警报：温度或湿度超过阈值！
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  // 定义温度和湿度的响应式变量
  const temperature = ref(20); // 初始温度
  const humidity = ref(50); // 初始湿度
  const temperatureThreshold = 80; // 温度阈值
  const humidityThreshold = 90; // 湿度阈值
  const alert = ref(false); // 警报状态
  
  // 监视温度和湿度的变化
  watch(temperature, (newTemp) => {
    if (newTemp > temperatureThreshold) {
      alert.value = true;
    } else {
      alert.value = false;
    }
  });
  
  watch(humidity, (newHumidity) => {
    if (newHumidity > humidityThreshold) {
      alert.value = true;
    } else {
      alert.value = false;
    }
  });
  
  // 增加或减少温度的方法
  const increaseTemperature = () => temperature.value++;
  const decreaseTemperature = () => temperature.value--;
  
  // 增加或减少湿度的方法
  const increaseHumidity = () => humidity.value++;
  const decreaseHumidity = () => humidity.value--;
  </script>
  
  <style scoped>
  button {
    margin: 5px;
  }
  </style>
  